<template>
  <el-menu
    :default-active="activeMenu"
    router
    class="sidebar-menu"
    :collapse="isCollapse"
  >
    <!-- ========== 游客（未登录）功能模块 ========== -->
    <template v-if="!isAuthenticated">
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      
      <el-sub-menu index="attractions">
        <template #title>
          <el-icon><Location /></el-icon>
          <span>景点探索</span>
        </template>
        <el-menu-item index="/attractions">
          <el-icon><List /></el-icon>
          <template #title>景点列表</template>
        </el-menu-item>
        <el-menu-item index="/attractions/map">
          <el-icon><MapLocation /></el-icon>
          <template #title>地图总览</template>
        </el-menu-item>
        <el-menu-item index="/attractions/rankings">
          <el-icon><Trophy /></el-icon>
          <template #title>景点排行榜</template>
        </el-menu-item>
      </el-sub-menu>
      
      <el-menu-item index="/routes/recommended">
        <el-icon><Promotion /></el-icon>
        <template #title>热门路线</template>
      </el-menu-item>
      
      <el-divider style="margin: 10px 0;" />
      <el-menu-item index="/login">
        <el-icon><UserFilled /></el-icon>
        <template #title>登录/注册</template>
      </el-menu-item>
    </template>
    
    <!-- ========== 普通用户（已登录）功能模块 ========== -->
    <template v-if="isAuthenticated && !isAdmin">
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      
      <el-sub-menu index="attractions">
        <template #title>
          <el-icon><Location /></el-icon>
          <span>景点探索</span>
        </template>
        <el-menu-item index="/attractions">
          <el-icon><List /></el-icon>
          <template #title>景点列表</template>
        </el-menu-item>
        <el-menu-item index="/attractions/map">
          <el-icon><MapLocation /></el-icon>
          <template #title>地图总览</template>
        </el-menu-item>
        <el-menu-item index="/attractions/rankings">
          <el-icon><Trophy /></el-icon>
          <template #title>景点排行榜</template>
        </el-menu-item>
      </el-sub-menu>
      
      <el-menu-item index="/route-plan">
        <el-icon><MapLocation /></el-icon>
        <template #title>路线规划</template>
      </el-menu-item>
      
      <el-menu-item index="/routes/recommended">
        <el-icon><Promotion /></el-icon>
        <template #title>热门路线</template>
      </el-menu-item>
      
      <el-divider style="margin: 10px 0;" />
      
      <el-menu-item index="/dashboard">
        <el-icon><User /></el-icon>
        <template #title>个人空间</template>
      </el-menu-item>
      
      <el-menu-item index="/itineraries">
        <el-icon><Calendar /></el-icon>
        <template #title>行程规划</template>
      </el-menu-item>
      
      <el-menu-item index="/social">
        <el-icon><ChatDotRound /></el-icon>
        <template #title>社交中心</template>
      </el-menu-item>
      
      <el-menu-item index="/favorites">
        <el-icon><Star /></el-icon>
        <template #title>我的收藏</template>
      </el-menu-item>
    </template>
    
    <!-- ========== 管理员功能模块（只显示管理后台功能） ========== -->
    <template v-if="isAdmin">
      <el-menu-item index="/admin">
        <el-icon><DataAnalysis /></el-icon>
        <template #title>数据统计</template>
      </el-menu-item>
      
      <el-menu-item index="/admin/attractions">
        <el-icon><Location /></el-icon>
        <template #title>景点管理</template>
      </el-menu-item>
      
      <el-menu-item index="/admin/users">
        <el-icon><User /></el-icon>
        <template #title>用户管理</template>
      </el-menu-item>
      
      <el-menu-item index="/admin/posts">
        <el-icon><ChatDotRound /></el-icon>
        <template #title>内容管理</template>
      </el-menu-item>
      
      <el-menu-item index="/admin/settings">
        <el-icon><Setting /></el-icon>
        <template #title>系统配置</template>
      </el-menu-item>
      
      <el-menu-item index="/admin/logs">
        <el-icon><Document /></el-icon>
        <template #title>操作日志</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import {
  HomeFilled,
  MapLocation,
  Location,
  User,
  UserFilled,
  Calendar,
  ChatDotRound,
  Setting,
  Star,
  DataAnalysis,
  List,
  Trophy,
  Promotion,
  Document
} from '@element-plus/icons-vue'

export default {
  name: 'SidebarMenu',
  components: {
    HomeFilled,
    MapLocation,
    Location,
    User,
    UserFilled,
    Calendar,
    ChatDotRound,
    Setting,
    Star,
    DataAnalysis,
    List,
    Trophy,
    Promotion,
    Document
  },
  props: {
    collapse: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const route = useRoute()
    const store = useStore()
    
    const activeMenu = computed(() => route.path)
    const isAuthenticated = computed(() => store.getters.isAuthenticated)
    const isAdmin = computed(() => store.getters.isAdmin)
    const isCollapse = computed(() => props.collapse)
    
    return {
      activeMenu,
      isAuthenticated,
      isAdmin,
      isCollapse
    }
  }
}
</script>

<style scoped>
.sidebar-menu {
  border-right: none;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(227,242,253,0.95) 100%);
  backdrop-filter: blur(10px);
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 240px;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  margin: 4px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sidebar-menu .el-menu-item:hover {
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
  color: #C8102E;
  transform: translateX(4px);
}

.sidebar-menu .el-menu-item.is-active {
  background: linear-gradient(135deg, #C8102E 0%, #D4AF37 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}

.sidebar-menu .el-menu-item.is-active .el-icon {
  color: white;
}

.sidebar-menu .el-sub-menu .el-menu-item {
  margin-left: 20px;
  padding-left: 40px !important;
}

.sidebar-menu .el-sub-menu__title {
  margin: 4px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sidebar-menu .el-sub-menu__title:hover {
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
  color: #C8102E;
}

.sidebar-menu .el-icon {
  margin-right: 8px;
  font-size: 18px;
  transition: all 0.3s ease;
}

.sidebar-menu .el-menu-item:hover .el-icon {
  transform: scale(1.1);
}

.sidebar-menu .el-divider {
  margin: 12px 16px;
  border-color: rgba(200, 16, 46, 0.2);
}

</style>

